<template>
  <el-container>
    <!-- 侧边栏内容 -->
    <el-aside :width="isCollapse ? '64px' : '200px'" class="home-aside">
      <div class="aside" v-if="menusList.length !== 0">
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#003C72"
          text-color="#fff"
          active-text-color="#00a8ff"
          :default-active="isActive"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
        >
          <el-tooltip :content="isCollapse ? '展开侧边栏' : '收起侧边栏'" placement="top">
              <div class="toggle" @click="toggleCollapse">
                  <i
                    :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                  ></i>
              </div>
          </el-tooltip>
          <el-submenu
            :index="item.path"
            v-for="(item, index) in menusList"
            :key="item.id"
          >
            <!-- 一级菜单 -->
            <template slot="title">
              <i :class="iconsList[index]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="indexCount(index, i)"
              v-for="(children, i) in item.children"
              :key="children.id"
              @click="itemClick(index, i)"
            >
              <i :class="icon"></i>
              <span>{{ children.authName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>
    <!-- 主体内容 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import { getMenusList } from "network/home.js";

import { Loading } from "element-ui";

export default {
  name: "HomeAside",
  data() {
    return {
      menusList: [],
      iconsList: [
        "iconfont icon-line-user",
        "iconfont icon-line-examine",
        "iconfont icon-line-commodity",
        "iconfont icon-line-order",
        "iconfont icon-line-ranking",
      ],
      icon: "iconfont icon-fill-right",
      isCollapse: false,
      isActive: null,
    };
  },
  created() {
    // 将当前活跃的选项设为高亮
    this.isActive = window.sessionStorage.getItem("active");
    if (!this.isActive) this.isActive = "/users";
    // 遮罩层的使用
    let loadingInstance = Loading.service({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.6)",
    });
    // 获取侧边栏的数据
    getMenusList()
      .then((res) => {
        this.menusList = res.data;
        loadingInstance.close();
      })
      .catch((rej) => {
        this.$message.error(new Error(rej.meta));
      });
  },
  methods: {
    indexCount(x, y) {
      return "/" + this.menusList[x].children[y].path;
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.$emit("collapseClick", this.isCollapse);
    },
    itemClick(x, y) {
      window.sessionStorage.setItem("active", this.indexCount(x, y));
    },
  },
  destroyed() {
    window.sessionStorage.setItem("active", '/users');
  }
};
</script>

<style scoped>
.iconfont {
  font-size: 20px;
  margin-right: 7px;

  color: rgb(247, 247, 247);
}
.el-main {
  padding: 1.5rem 2.5rem;
  background-color: rgba(241, 241, 241, .8);
}
.el-menu {
  border-right: none;
}
.toggle {
  text-align: center;
  cursor: pointer;
  color: #fff;
  font-size: 22px;
  height: 35px;
  line-height: 35px;
  background-color: #204769;
}
.home-aside {
  background-color: var(--themeColor);
  height: 100%;
}
</style>